<template>
	<view class="ex-mall-page" :class="[$themeClass('panel-another-content-bg-color')]">
		<!-- 头部 -->
		<view class="ex-mall-header" :class="[$themeClass('header-bg-color')]">
			<!-- #ifdef MP-WEIXIN -->
			<view class="ex-mall-header-mp-weixin-fill" :class="[$themeClass('header-title-color')]">支付结果</view>
			<!-- #endif -->
			<view class="ex-mall-header-content">
				<view class="ex-mall-header-left">
				</view>
				<view class="ex-mall-header-right">
					<view class="ex-mall-header-btn" :class="[$themeClass('search-btn-bg-color')]">
						<text class="ex-mall-header-btn-icon ri-checkbox-circle-line" :class="[$themeClass('search-btn-color')]"></text>
					</view>
				</view>
			</view>
		</view>

    <view class="content">
      <view class="title">
        <view class="icon ri-checkbox-circle-line"></view>
        <view v-if="order.status === 1" class="msg">訂單處理中</view>
        <view v-else-if="order.status === 2" class="msg">商品已送出</view>
        <view v-else-if="order.status === 3" class="msg">訂單已完成</view>
        <view v-else class="msg">訂單錯誤!</view>
      </view>
      <u-form v-if="Object.keys(order).length !== 0" class="form" :label-width="200" :model="order" ref="uForm">
        <u-form-item label="訂單號"><u-input v-model="order.code" disabled /></u-form-item>
        <u-form-item label="訂單時間"><u-input v-model="order.createTime" disabled /></u-form-item>
        <u-form-item label="商品數量"><u-input v-model="order.goodsCount + ' 件'" disabled /></u-form-item>
        <u-form-item label="小計"><u-input v-model="'NT$ ' + order.goodsAmountTotal" disabled /></u-form-item>
        <u-form-item label="運費"><u-input v-model="'NT$ ' + order.logisticsFee" disabled /></u-form-item>
        <u-form-item label="訂單金額"><u-input v-model="'NT$ ' + order.totalAmount" disabled /></u-form-item>
        <u-form-item label="運送地址"><u-input v-model="order.shippingAddress" disabled /></u-form-item>
        <u-form-item label="電子郵件">
          <u-input v-if="order.receiverEmail" v-model="order.receiverEmail" disabled />
        </u-form-item>
        <u-form-item v-if="order.logisticsCode !== ''" label="物流信息"><u-input v-model="order.logisticsCode" disabled /></u-form-item>
        <u-form-item label="收件信息"><u-input v-model="order.receiverName + ', ' + order.receiverPhone" disabled /></u-form-item>
        <u-form-item label="備注">
          <u-input v-if="order.remark" v-model="order.remark" disabled />
        </u-form-item>
      </u-form>
      <view class="goodsList" v-if="order.associatedGoods">
        <view class="item" v-for="(item, index) in JSON.parse(order.associatedGoods)">
          <view class="thumbnail">
            <image @tap="previewImage(item.pictureUrl)" class="img" mode="aspectFill" :src="item.pictureUrl"></image>
          </view>
          <view class="info">
            <view>{{item.goodsName}}</view>
            <view v-if="item.value">
              <text class="spec" v-for="(styleKey, i) in Object.keys(JSON.parse(item.value))">
                <span v-if="i === 0">{{JSON.parse(item.value)[styleKey]}}</span>
                <span v-else><span v-html="'&nbsp;-&nbsp;'"></span>{{JSON.parse(item.value)[styleKey]}}</span>
              </text>
            </view>
            <view v-if="item.price" class="price" :class="[$themeClass('goods-price-color')]">NT$ {{ item.price }}</view>
            <view v-else class="price" :class="[$themeClass('goods-none-color')]"></view>
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
  import UForm from "../../libs/uview-ui/components/u-form/u-form";
  import UFormItem from "../../libs/uview-ui/components/u-form-item/u-form-item";
  import UInput from "../../libs/uview-ui/components/u-input/u-input";

  export default {
    components: {UInput, UFormItem, UForm},
    data() {
			return {
				order: {}
			}
		},
		onLoad(options) {
      this.getOrderInfo(options.id)
		},
    onReady() {
      // #ifdef H5
      if (navigator.userAgent.indexOf('Mobile') === -1) {
        document.querySelector('body').setAttribute('style', 'width: 420px;margin: 0px auto;position: relative;')
      }
      // #endif
    },
		methods: {
      previewImage(imgUrl) {
        const imgsArray = [];
        imgsArray[0] = imgUrl
        uni.previewImage({
          current: 0,
          urls: imgsArray
        });
      },
			getOrderInfo(id) {
        uni.$u.http.get('/api/order/detail', {
          orderId: id
        }
        ).then(async (res) => {
          this.order = res.data
        })
      }
		}
	}
</script>

<style lang="scss">

  .content {
    .title {
      display: flex;
      align-items: center;
      margin: 20px 40px;
      &>.icon {
        color: #60D6D1;
        font-size: 18px;
      }
      &>.msg {
        margin-left: 10px;
        font-size: 18px;
      }
    }
    &>.form {
      margin: 0 40px;
      font-size: 15px;
      color: lightgrey;
    }

    &>.goodsList {
      &>.item {
        display: flex;
        align-items: center;
        margin: 20px 40px;

        &>.thumbnail {
          &>.img {
            width: 100px;
            height: 100px;
            background-color: #F8E3DC;
            border-radius: 12px;
          }
        }
         &>.info {
           margin-left: 20px;
           font-size: 15px;
           color: lightgrey;
         }
      }
    }
  }
</style>
